<template>
    <div class="info-attr-module">

        <div class="title">赛事报名</div>
        <div class="register">
            <div class="item">
                <div class="name">参与代表对队</div>
                <div class="right">
                    <div class="text">{{info.team.teamName}}</div>
                </div>
            </div>
            <div class="item">
                <div class="name">领队</div>
                <div class="right">
                    <div class="text">{{info.team.realName}}</div>
                </div>
            </div>
            <div class="item">
                <div class="name">比赛时间</div>
                <div class="right">
                    <div class="text">{{matchinfo.matchdate}}</div>
                </div>
            </div>

            <div class="item">
                <div class="name">报名时间</div>
                <div class="right">
                    <div class="text">{{matchinfo.signdate}}</div>
                </div>
            </div>
            <div class="item">
                <div class="name">赛事名称</div>
                <div class="right">
                    <div class="text">{{matchinfo.match_name}}</div>

                </div>
            </div>
            <div class="item">
                <div class="name">赛项类别</div>
                <div class="right">
                    <div class="text">{{itemInfo.classname}}</div>
                </div>
            </div>
            <div class="item">
                <div class="name">赛项类型</div>
                <div class="right">
                    <div class="text">{{itemInfo.typename}}</div>
                </div>
            </div>
            <div class="item">
                <div class="name"><span>*</span>参赛组别</div>
                <div class="right">
                    <el-radio-group v-model="ruleForm.groupId">
                        <el-radio v-for="(item,index) in dictGroups.items" :key="index" :label="item.id">{{item.dictLabel}}</el-radio>

                    </el-radio-group>
                </div>
            </div>
        </div>
        <div class="title">赛事报名</div>
        <div class="register" v-for="(item,index) in userList" :key="index" >
            <div class="item" @click="toSelect('student',item)">
                <div class="name"><span>*</span>*队员{{index+1}}</div>
                <div class="right">
                    <div class="text" >{{item.real_name}}</div>
                </div>
              <el-icon color="#959CA9">
                <ArrowRight />
              </el-icon>
            </div>
            <div class="item" @click="toSelect('teacher',item.teacher)">
                <div class="name"><span>*</span>*指导老师</div>
                <div class="right">
                    <div class="select">
                        <div class="text" >{{item.teacher.real_name}}</div>
                        <el-icon color="#959CA9">
                            <ArrowRight />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="register">

            <div class="add" @click="addUser">
                <el-icon color="#00A0E9">
                    <CirclePlusFilled />
                </el-icon>添加队员
            </div>
        </div>
        <div class="info-hint">
            <span>注：</span>
            <div>赛前请关注 参赛报名  >  报名记录 > 对应赛事赛项的参赛时间信息</div>
        </div>
        <div class="registe_agreement"><el-checkbox v-model="ruleForm.checked2" />点击同意并接受即表示您已阅读了解并同意<el-button
                @click="handleaGreement" type="text">《注册协议》</el-button></div>

        <div class="fixed-btn">
            <div class="btn" @click="savePerson">提交报名</div>
        </div>
    </div>
  <drawerSelect ref="dsRef" :title="'请选择'">
    <div class="drawer-select">
      <div v-for="(item,index) in currentSelect.items" v-show="item.selected!==1||item.id == currentInput.id " :key="index" class="item" @click="handleSelect(item.id,item.real_name)"
           :class="item.id===currentInput.id?'active':''">
        {{item.real_name}} <el-icon color="#00A0E9"><Select /></el-icon>
      </div>
    </div>
  </drawerSelect>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from "vue";
import {useRoute, useRouter} from "vue-router";
import drawerSelect from "@/components/DrawerSelect";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";
import {getCache} from "@/utils/cache";
let router = useRouter();
const route = useRoute();
const dsRef = ref();
let info =ref({
  haveJinJi:false,
  team:getCache( "CacheToken",{ isSessionStorage: true }, {})['spTeamEntity']
});
const  id = route.query.id ;
let matchId :any= route.query.matchId;
const season= route.query.season;
const selectGroup= ref({student:{title:'选择选手',items:[{code:'1',name:'选手1'},{code:'2',name:'选手2'}],value:'1'},teacher:{title:'选择老师',items:[]}});
const currentSelect:any = ref(selectGroup.value['student']);
/**
*赛项
*/
const itemInfo = ref({
  "base_match_item_id": "43",
  "classname": "旋翼类",
  "student_num_max": 1,
  "item_type": 100201,
  "match_id": "1",
  "item_classify": "100101",
  "teacher_num": 1,
  "item_name": "飞跃巅峰赛",
  "id": "148",
  "student_num": 1,
  "typename": "个人赛",
  "teacher_num_max": 1
});
const userList :any=ref([{
  id:null,
  name:null,
teacher:{}
}]);
const dictGroups =ref({items:[]});
const currentInput:any=ref();
let selectType='student';
const toSelect=(type:string ,c:any)=>{
  selectType=type;
  if(type=='student'){

    currentSelect.value = selectGroup.value[type];
    currentSelect.value.title='请选择选手';
  }
  if(type=='teacher'){
    currentSelect.value = selectGroup.value[type];
  }
  currentInput.value= c;
  dsRef.value.open();
}
const handleSelect = (v:any,n:any,type:string) => {
  currentInput.value.id =v;
  currentInput.value.real_name =n;
  if(selectType==='student'){
    currentSelect.value.items.forEach((e:any)=>{
      e.selected=2;
      userList.value.forEach((e2:any)=>{
        if(e2.id ==e.id ){
          e.selected=1;
        }
      })
    });
  }
}
const ruleForm = reactive({
  users:[],
  matchItemId:id,
  teamName: "",checked2:false,
    groupId: null
});
const handleaGreement = () => {
    router.push("/auth/agreement");
}
/**
*添加报名选手
*/
const addUser=()=>{
  userList.value.push({teacher:{}});
}

baseService.get("/front/spbasematchitemgoupref/queryGroup?id="+route.query.id).then((e:any)=>{
  if(e.code=='0'){
    dictGroups.value.items = e.data;
  }
});

const queryUser =(season:string)=>{
  baseService.get("/front/fast/user/userList/list?pageSize=10&type=4&season="+season+"&noItemId="+id).then((e:any)=>{
    if(e.code=='0'){
      selectGroup.value['student'].items= e.data;
    }
  });
}

baseService.get("/front/fast/user/userList/list?pageSize=100&type=3").then((e:any)=>{
  if(e.code=='0'){
    selectGroup.value['teacher'].items= e.data;
  }
});
let matchinfo = ref({});
baseService.get("/front/fast/match/match/info?id="+matchId).then((e:any)=>{
  if(e.code=='0'){
    matchinfo.value = e.data;
    queryUser(e.data.season);
  }
});
const savePerson =()=>{
  const users:any =[];
  let check =true;
  if(!ruleForm.groupId){
    ElMessage.error("请选择参赛组别！");
    check=false;
  }
  userList.value.forEach((e:any)=>{
    if(!e.id && check){
      ElMessage.error("请选择选手");
      check=false;
    }
    if(!e.teacher.id && check){
      ElMessage.error("请选择指导老师");
      check=false;
    }
    users.push({userId:e.id,teachers:e.teacher.id});

  })
  if (!ruleForm.checked2) {
    ElMessage.error("您未同意用户协议，请先同意！");
    check =  false;
  }
  ruleForm.users = users;
  if(check){
    baseService.post("/front/spmatchItemTeam/savePerson",ruleForm).then((res:any )=> {
      if (res.code == 0) {
        ElMessage.success('报名成功');
        router.push("/match/info?id="+matchId);
      }else{
        ElMessage.error(res.msg);
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
